<template>
    <div class="demand-recommend">
        <a-modal width="1300px" :visible="visible" title="智能推荐" @cancel="closeModal" class="yuan-modal demand-recommend-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="page-main">
                    <PageListVue :listInfo="detailInfo" />

                    <a-card>
                        <a-tabs type="card" v-model="pageType">
                            <a-tab-pane v-for="item in typeArr" :key="item.val" :tab="item.title"></a-tab-pane>
                        </a-tabs>

                        <div class="table yuan-form">
                            <div class="form-title">推荐成果</div>
                            <a-carousel autoplay arrows draggable>
                                <div style="padding:15px" v-for="item in achievementS">
                                    <AchPageListVue :listInfo="item" />
                                </div>
                            </a-carousel>

                            <div class="form-title">推荐专家</div>

                            <div style="padding:15px;" >
                                <UserPageListVue :listInfo="item" v-for="item in userS"/>
                            </div>
                        </div>
                    </a-card>
                </div>

            </a-spin>
            <template slot="footer">
                <a-button @click="closeModal" type="primary" :loading="loading">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import PageListVue from "./components/demandPageList.vue";
import AchPageListVue from "./components/achPageList.vue";
import UserPageListVue from "./components/userPageList.vue";
import api from "@/api/api";
import config from "@/utils/config";
@Component({
    name: "tpl",
    components: { PageListVue, AchPageListVue, UserPageListVue },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) recId!: string;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.pageType = "4";
            this.pageInit();
        }
    }
    schList = [
        { title: "资料审核", val: 0 },
        { title: "征集中", val: 2 },
    ];
    pageList = [];
    pageType = "4";
    typeArr = [{ title: "智能匹配", val: "4" }];
    loading = false;
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        this.loading = true;
        try {
            // const res = await warningApi.planAdd(this.sureInfo);
            // this.$message.success(res.msg);
            this.closeModal();
            this.$emit("sureClose");
        } finally {
            this.loading = false;
        }
    }
    async pageInit() {
        this.loading = true;
        Promise.all([this.getRecommend(), this.getDetailInfo()]).then(() => {
            this.loading = false;
        });
    }
    achievementS = [];
    userS = [];
    async getRecommend() {
        try {
            const res = await api.getRecommendList({ demandId: this.recId });
            this.achievementS = res.data.achievementS || [];
            this.userS = res.data.userS ||[];
        } finally {
            //this.loading = false;
        }
    }
    detailInfo: any = {};
    async getDetailInfo() {
        try {
            const res = await api.getDemandList({ id: this.recId });
            this.detailInfo = res.data;
        } finally {
            //this.loading = false;
        }
    }
}
</script>
<style lang="scss">
.demand-recommend-modal {
    .page-main {
        background-color: #fff;
        padding: 10px;
        border-radius: 8px;
    }

    .slick-dots-bottom {
        bottom: 8px;
    }
    .ant-carousel .slick-dots li {
        border: solid 1px #ccc;
        background-color: #ddd;
    }
}
</style>
